<template>
    <div class="home">
        <!--面包屑导航-->
        <Breadcrumb :menulist="menuList"></Breadcrumb>

        <!--内容-->
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="tabHeader">
                <!--<el-button icon="el-icon-search" class="search" type="primary" @click="changeSearch"></el-button>-->
                <el-input class="searchInput" placeholder="搜索数据源" clearable v-model="searchDataSources">
                    <el-button slot="append" type="success" icon="el-icon-search" @click="changeSearch"></el-button>
                </el-input>
                <el-button type="primary" icon="el-icon-plus" @click="add">添加数据源</el-button>
            </div>

            <el-table stripe :data="list.list" current-row-key="createUserId" style="width: 100%">
<!--                <el-table-column label="数据源ID" prop="dataSourceId"></el-table-column>-->
                <el-table-column label="数据源编码" prop="dataSourceCode"></el-table-column>
                <el-table-column label="数据源名称" prop="dataSourceName"></el-table-column>
                <el-table-column label="数据源类型" prop="dataSourceType.displayName"></el-table-column>
                <el-table-column label="数据库地址" prop="jdbcUrl"></el-table-column>
                <el-table-column label="数据库服务名" prop="driverClassName"></el-table-column>
                <el-table-column label="登录名" prop="userName"></el-table-column>
                <el-table-column label="密码" prop="userPassword"></el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="创建用户" prop="createUserName"></el-table-column>
                <el-table-column label="修改时间" prop="modifyTime"></el-table-column>
                <el-table-column label="修改用户" prop="modifyUserName"></el-table-column>
                <el-table-column label="描述" prop="description"></el-table-column>
                <el-table-column label="操作" width="225" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="openEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button slot="reference" size="mini" type="danger" @click="openDelModal(scope.$index, scope.row)">删除</el-button>
                        <el-button size="mini" @click="test(scope.$index, scope.row)" :type="scope.row.testResult || 'primary'" icon="el-icon-s-opportunity" plain>{{scope.row.test || '测试'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="slot, total, prev, pager, next, jumper"
                    :total="list.total"
                    :current-page.sync="currentPage"
                    :page-size="rows"
                    @current-change="changePage"
            >
                <el-button icon="el-icon-refresh" type="primary" style="margin-right: 10px; background: #409EFF; color:#fff" @click="getList"></el-button>
            </el-pagination>

        </el-card>

        <!--添加/编辑表单数据-->
        <el-dialog :title="type===1 ? '新增数据源' : type === 2 ? '编辑数据源' : '删除数据源'" :visible.sync="dialogFormVisible" width="600px">
            <el-form :model="form">
                <el-form-item label="删除提示" :label-width="formLabelWidth" v-if="type===3">
                    <el-input v-model="msg" type="textarea" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="数据源ID" :label-width="formLabelWidth" v-if="0">
                    <el-input v-model="form.dataSourceId" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="数据源编码" :label-width="formLabelWidth">
                    <el-input v-model="form.dataSourceCode" autocomplete="off" :disabled="type===2 || type===3"></el-input>
                </el-form-item>
                <el-form-item label="数据源名称" :label-width="formLabelWidth">
                    <el-input v-model="form.dataSourceName" autocomplete="off" :disabled="type===3"></el-input>
                </el-form-item>
                <el-form-item label="数据源类型" :label-width="formLabelWidth">
                    <el-select v-model="form.dataSourceType" placeholder="请选择" :disabled="type===3" style="width: 100%;">
                        <el-option label="SqlServer" value="0"></el-option>
                        <el-option label="MySql" value="1"></el-option>
                        <el-option label="Oracle" value="2"></el-option>
                        <el-option label="Sqlite" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据库地址" :label-width="formLabelWidth">
                    <el-input v-model="form.jdbcUrl" autocomplete="off" :disabled="type===3"></el-input>
                </el-form-item>
                <el-form-item label="数据库服务名" :label-width="formLabelWidth">
                    <el-input v-model="form.driverClassName" autocomplete="off" :disabled="type===3"></el-input>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.userName" autocomplete="off" :disabled="type===3"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.passwd" autocomplete="off" :disabled="type===3"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input v-model="form.description" autocomplete="off" :disabled="type===3"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <template v-if="type !== 3">
                    <el-button @click="test" :type="testResult" icon="el-icon-s-opportunity" plain>测试</el-button>
                    <el-button type="primary" @click="save">保 存</el-button>
                    <el-button plain icon="el-icon-delete" @click="clear" v-if="type === 1">清 除</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </template>
                <template v-else>
                    <el-button type="danger" icon="el-icon-delete" :loading="delLoading" @click="del">删 除</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </template>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import {request, url} from "../api/request";

    export default {
        name: "dataSource",
        components: {
            Breadcrumb
        },
        data() {
            return {
                menuList: ['首页', '数据源'],
                searchDataSources: '',
                dialogFormVisible:false,
                formLabelWidth: '100px',
                type:1,//1为新增 2为编辑 3为删除
                form: {
                    // dataSourceCode: '123',
                    // dataSourceName: '测试999',
                    // dataSourceType: '1',
                    // jdbcUrl: '123.56.129.64',
                    // driverClassName: 'modeltool',
                    // userName: 'root',
                    // passwd: 'root',
                    // description: '456',
                },
                saveLoading:false,
                // textContent:'测试',
                testResult:'primary',
                delLoading:false,
                editLoading:false,

                list:{
                    list:[]
                },
                currentPage:1,
                rows:10,
                dataSourceId:null,
                msg:'',//删除提示信息
            };
        },
        mounted: function () {
            this.getList();
        },
        methods: {
            //获取列表
            getList(){
                request(`${url.dataSources_list}`,{
                    data:{
                        currentPage:this.currentPage,
                        rows:this.rows,
                    }
                }, res=>{
                    // console.log(res);
                    let list = res.data;
                    list.list.map(v=>{
                        v.test = '测试';
                        v.testResult = 'primary';
                    });
                    this.list = list;
                    // console.log(this.list.list);
                })
            },
            //新增/编辑
            save(){

                if (this.type === 1) {//新增
                    /*this.$axios.post(`${url.datasources}`,dataSourceCode).then(res=>{
                        this.$message('添加数据源成功！');
                        this.dialogFormVisible = false;
                    })*/
                    request(`${url.datasources}`,{
                        method:'POST',
                        data:{
                            dataSourceCode:this.form.dataSourceCode,
                            dataSourceName:this.form.dataSourceName,
                            dataSourceType:this.form.dataSourceType,
                            jdbcUrl:this.form.jdbcUrl,
                            driverClassName:this.form.driverClassName,
                            userName:this.form.userName,
                            passwd:this.form.passwd,
                            description:this.form.description,
                        }
                    },res=>{
                        this.$notify.success('添加数据源成功！');
                        this.dialogFormVisible = false;
                        this.getList();
                    })
                }
                else if (this.type === 2){//编辑
                    this.editLoading = true;
                    request(`${url.datasources}/${this.dataSourceId}`,{
                        method:'PUT',
                        data:{
                            dataSourceCode:this.form.dataSourceCode,
                            dataSourceName:this.form.dataSourceName,
                            dataSourceType:this.form.dataSourceType,
                            jdbcUrl:this.form.jdbcUrl,
                            driverClassName:this.form.driverClassName,
                            userName:this.form.userName,
                            passwd:this.form.passwd,
                            description:this.form.description,
                        }
                    },res=>{
                        this.$notify.success('编辑成功！');
                        this.cancel();
                        this.editLoading = false;
                        this.form = {};
                        this.getList();
                    })
                }
            },
            openEdit(index, row) {
                this.type = 2;
                this.form = {...row};
                this.form.dataSourceType = `${row.dataSourceType.code}`;
                this.dataSourceId = row.dataSourceId;
                this.dialogFormVisible = true;
            },
            openDelModal(index, row) {
                this.type = 3;
                this.dialogFormVisible = true;
                this.form = {...row};
                this.form.dataSourceType = `${row.dataSourceType.displayName}`;
                this.dataSourceId = row.dataSourceId;
                request(`${url.datasourcesCheck}/${this.dataSourceId}`,{
                    // method:'delete',
                },res=>{
                    this.msg = res.message;
                })
            },
            del(){
                this.delLoading = true;

                request(`${url.datasources}/${this.dataSourceId}`,{
                    method:'delete',
                },res=>{
                    this.$notify.success(res.message);
                    this.cancel();
                    this.delLoading = false;
                    this.getList();
                },(err)=>{
                    this.$message(err);
                    this.cancel();
                    this.delLoading = false;
                })
            },
            //测试数据源
            test(index, row){
                !row && (row = this.form);
                // this.testResult = 'success';//danger
                // this.textContent = '测试通过';
                request(`${url.dataSources_test}`,{
                    method:'POST',
                    data:{
                        dataSourceType:row.dataSourceType.code || row.dataSourceType,
                        jdbcUrl:row.jdbcUrl,
                        driverClassName:row.driverClassName,
                        userName:row.userName,
                        passwd:row.passwd,
                    }
                },res=>{
                    this.$notify.info(res.message);
                })
            },
            add(){
                this.type = 1;
                this.dialogFormVisible = true;
            },
            //取消
            cancel(){
                this.dialogFormVisible = false;
                this.clear();
            },
            clear(){
                this.form = {};
            },
            changePage(e){
                this.currentPage = e;
                this.getList();
            },
            changeSearch() {
                console.log(this.searchDataSources);
            },
        }
    };
</script>

<style scoped>
    .searchInput {
        width: 250px;
        float: right;
    }

    .search {
        float: right;
        margin-left: 8px;
    }
</style>
